
<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo">
      <span style="color: #fff;text-align: center;">hello logo</span>
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
      <li nz-menu-item  routerLinkActive="ant-menu-item-selected" [routerLinkActiveOptions]="{ exact: true }"><a routerLink="/auth-guard" ><span><i class="anticon anticon-home"></i><span class="nav-text">首页</span></span></a></li>
      <li nz-menu-item routerLinkActive="ant-menu-item-selected" [routerLinkActiveOptions]="{ exact: true }"><a routerLink="/auth-guard/users" ><span title><i class="anticon anticon-user"></i><span class="nav-text">用户管理</span></span></a></li>
      <li nz-menu-item routerLinkActive="ant-menu-item-selected" [routerLinkActiveOptions]="{ exact: true }"><a routerLink="/auth-guard/types" ><span title><i class="anticon anticon-switcher"></i><span class="nav-text">类型管理</span></span></a></li>
      <!--<li nz-submenu>-->
        <!--<span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>-->
        <!--<ul>-->
          <!--<li nz-menu-item>Team 1</li>-->
          <!--<li nz-menu-item>Team 2</li>-->
        <!--</ul>-->
      <!--</li>-->
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header style="background: #fff; padding:0;position: sticky;top: 0;z-index: 999">
      <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
      <ul class="anticon trigger" style="    position: absolute;right: 0;" nz-menu [nzMode]="'horizontal'">
        <li nz-submenu>
          <span title>设置TODO</span>
          <ul>
            <li nz-menu-item>菜单 1</li>
            <li nz-menu-item>菜单 2</li>
          </ul>
        </li>
      </ul>
    </nz-header>
    <nz-content style="margin:0 16px;">
      <nz-breadcrumb style="margin:12px 0;">
        <nz-breadcrumb-item>User</nz-breadcrumb-item>
        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="padding:24px; background: #fff; min-height: 360px;">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
